<!-- 菜谱详情页面 -->
<template>
  <div class="recipe-detail" ref="recipeDetailRef">
    <!-- 全局加载效果 -->
    <van-loading v-if="isLoading" type="spinner" class="global-loading" />
    <!-- 内容区域，当加载时隐藏 -->
    <div v-else>

      <!-- 透明顶部导航栏 -->
      <div class="transparent-navbar" :class="{ scrolled: isScrolled }">
        <van-icon name="arrow-left" class="nav-icon" :color="isScrolled ? '#000' : '#fff'" @click="goBack" />
        <div class="nav-actions">
          <van-icon name="wechat" class="nav-icon" :color="isScrolled ? '#000' : '#fff'" @click="shareToWechat" />
          <van-icon name="friends-o" class="nav-icon" :color="isScrolled ? '#000' : '#fff'"
            @click="shareToWechatMoment" />
          <van-icon name="share-o" class="nav-icon" :color="isScrolled ? '#000' : '#fff'" @click="share" />
        </div>
      </div>
      <!-- 内容区域 -->
      <div class="recipe-content">
        <!-- 图片区域 -->
        <div class="media-section">
          <van-swipe ref="swipe" class="swipe" :loop="false" :show-indicators="false" @drag-end="onDragEnd">
            <template v-for="(image, index) in currentRecipe.images" :key="index">
              <van-swipe-item class="swipe-item">
                <van-image class="media-image" :src="image" fit="contain" @load="onImageLoad" />
              </van-swipe-item>
            </template>
          </van-swipe>
          <!-- 自定义分页指示器 -->
          <div class="page-indicator" v-if="currentRecipe.images && currentRecipe.images.length > 1">
            {{ currentImageIndex + 1 }}/{{ currentRecipe.images.length }}
          </div>
          <!-- 图片计数 -->
          <div class="image-count" v-if="currentRecipe.images && currentRecipe.images.length > 1">
            <van-icon name="photograph" /> {{ currentRecipe.images.length }}
          </div>
        </div>
        <!-- 标题和标签区域 -->
        <div class="title-section">
          <h1 class="recipe-title">{{ currentRecipe.title }}</h1>
          <!-- 标签行 -->
          <div class="tags-row">
            <span class="tag premium">精品</span>
            <span class="tag exclusive">独家</span>
            <span class="tag view-count">浏览{{ formatViewCount(currentRecipe.view_count) }}</span>
            <span class="tag collect-count">收藏{{ currentRecipe.collect_count }}</span>
            <span class="tag learn-count">学做{{ currentRecipe.learn_count }}</span>
          </div>
          <!-- 榜单标签 -->
          <div class="rank-tag">豆果精单 | 入选飙升榜 ></div>
        </div>
        <!-- 作者信息区域 -->
        <div class="author-section">
          <div class="author-info">
            <van-image class="author-avatar" round :src="currentRecipe.author?.p" width="40" height="40" />
            <div class="author-meta">
              <div class="author-name">{{ currentRecipe.author?.n }}</div>
              <div class="author-level">LV.{{ currentRecipe.author?.lvl }}</div>
            </div>
          </div>
          <van-button v-if="!isFollowing" type="primary" size="small" class="follow-btn" @click="handleFollow">
            关注
          </van-button>
          <van-button v-else type="default" size="small" class="followed-btn" @click="handleUnfollow">
            已关注
          </van-button>
        </div>
        <!-- 活动标签 -->
        <div class="activity-tags" v-if="currentRecipe.activity_tags && currentRecipe.activity_tags.length > 0">
          <span v-for="(tag, index) in currentRecipe.activity_tags" :key="index" class="activity-tag">
            #{{ tag }}#
          </span>
        </div>
        <!-- 菜谱基本信息 -->
        <div class="recipe-meta">
          <div class="meta-item">
            <van-icon name="clock-o" />
            <span>{{ currentRecipe.cooking_time }}分钟</span>
          </div>
          <div class="meta-item">
            <van-icon name="user-o" />
            <span>{{ currentRecipe.servings }}人份</span>
          </div>
          <div class="meta-item">
            <van-icon name="fire-o" />
            <span>{{ currentRecipe.calories }}卡路里</span>
          </div>
        </div>
        <!-- 原料部分 -->
        <div class="ingredients-section">
          <h2 class="section-title">用料</h2>
          <div class="ingredients-list">
            <div v-for="(ingredient, index) in currentRecipe.ingredients" :key="index" class="ingredient-item">
              <span class="ingredient-name">{{ ingredient.name }}</span>
              <span class="ingredient-amount">{{ ingredient.amount }}</span>
            </div>
          </div>
          <div class="add-to-cart">
            <a href="#" class="add-to-cart-link">+ 加入采购清单</a>
          </div>
        </div>
        <!-- 营养分析 -->
        <div class="nutrition-section">
          <h2 class="section-title">
            营养分析 <span class="nutrition-subtitle">（每100克）</span>
          </h2>
          <div class="nutrition-content" :class="{ locked: currentRecipe.nutrition_locked }">
            <div v-if="currentRecipe.nutrition_locked" class="nutrition-locked">
              <van-icon name="lock" class="lock-icon" />
              <div class="lock-text">
                <p>开通VIP查看完整营养分析</p>
                <p class="lock-subtext">或看视频解锁</p>
              </div>
            </div>
            <div v-else class="nutrition-details">
              <div class="nutrition-item">
                <span class="nutrition-label">热量</span>
                <span class="nutrition-value">150千卡</span>
              </div>
              <div class="nutrition-item">
                <span class="nutrition-label">蛋白质</span>
                <span class="nutrition-value">8克</span>
              </div>
              <div class="nutrition-item">
                <span class="nutrition-label">脂肪</span>
                <span class="nutrition-value">5克</span>
              </div>
              <div class="nutrition-item">
                <span class="nutrition-label">碳水化合物</span>
                <span class="nutrition-value">20克</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 做法步骤 -->
        <div class="steps-section">
          <h2 class="section-title">做法</h2>
          <div class="steps-overview">
            {{ currentRecipe.steps.length }}个步骤，约{{ currentRecipe.cooking_time }}分钟
          </div>
          <div class="steps-list">
            <div v-for="(step, index) in currentRecipe.steps" :key="index" class="step-item">
              <div class="step-header">
                <div class="step-number">{{ index + 1 }}/{{ currentRecipe.steps.length }}</div>
              </div>
              <div class="step-content">
                <p class="step-description">{{ step.description }}</p>
                <van-image v-if="step.image" class="step-image" :src="step.image" fit="cover" />
              </div>
            </div>
          </div>
        </div>
        <!-- 小贴士 -->
        <div class="tips-section" v-if="currentRecipe.tips">
          <h2 class="section-title">小贴士</h2>
          <p class="tips-content">{{ currentRecipe.tips }}</p>
        </div>
        <!-- 大家做的这道菜 -->
        <div class="ugc-section">
          <h2 class="section-title">大家做的这道菜 {{ currentRecipe.learn_count }}个作品</h2>
          <div class="ugc-list">
            <div v-for="(work, index) in currentRecipe.userWorks" :key="index" class="ugc-item">
              <van-image class="ugc-image" :src="work.image" fit="cover" />
              <div class="ugc-meta">
                <div class="ugc-author">{{ work.author }}</div>
                <div class="ugc-desc">{{ work.description }}</div>
              </div>
            </div>
          </div>
          <div class="view-all-ugc">查看全部{{ currentRecipe.learn_count }}个作品 ></div>
        </div>
        <!-- 时间和互动数据 -->
        <div class="meta-section">
          <span class="publish-time">{{ currentRecipe.publish_time }}</span>
          <span class="interaction-count">
            <span class="view-count">{{ formatViewCount(currentRecipe.view_count) }}看过</span>
            <span class="collect-count">{{ currentRecipe.collect_count }}次收藏</span>
            {{ currentRecipe.like_count }}次赞
          </span>
        </div>
      </div>
      <!-- 底部操作栏 -->
      <div class="recipe-footer">
        <div class="footer-actions">
          <!-- 传学做按钮 -->
          <van-button class="upload-btn" @click="uploadWork">
            <van-icon name="photograph" /> 传学做
          </van-button>
          <div class="action-group">
            <div class="comment-input-wrapper">
              <van-field v-model="commentText" class="comment-input" placeholder="说点什么..." :border="false" />
            </div>
            <div class="action-buttons">
              <!-- 评论 -->
              <div class="action-item" @click="showComments">
                <van-icon name="chat-o" class="comment-btn" />
                <span class="action-count">{{ commentCount }}</span>
              </div>
              <!-- 点赞 -->
              <div class="action-item" @click="handleLike">
                <van-icon :name="isLiked ? 'like' : 'like-o'" :class="['like-btn', { active: isLiked }]" />
                <span class="action-count">{{ formatLikeCount(currentRecipe.like_count) }}</span>
              </div>
              <!-- 收藏 -->
              <div class="action-item" @click="handleCollect">
                <van-icon :name="isCollected ? 'star' : 'star-o'" :class="['collect-btn', { active: isCollected }]" />
                <span class="action-text">收藏</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 评论弹窗 -->
      <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '70vh' }">
        <div class="comment-modal">
          <!-- 弹窗标题栏 -->
          <div class="comment-header">
            <div class="comment-title">全部评论（{{ commentCount }}）</div>
            <van-icon name="cross" class="close-icon" @click="showBottom = false" />
          </div>
          <!-- 评论列表 -->
          <div class="comment-list">
            <div v-for="comment in currentRecipe.comments" :key="comment.id" class="comment-item">
              <van-image class="comment-avatar" round :src="comment.user?.avatar" width="30" height="30" />
              <div class="comment-content">
                <div class="comment-user">
                  <span class="username">{{ comment.user?.name }}</span>
                  <span class="user-level">LV.{{ comment.user?.level }}</span>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-meta">
                  <span class="comment-date">{{ formatCommentDate(comment.time) }}</span>
                </div>
              </div>
              <div class="comment-actions">
                <div class="like-btn" :class="{ active: comment.isLiked }" @click="toggleCommentLike(comment)">
                  <van-icon :name="comment.isLiked ? 'like' : 'like-o'" />
                  <span>赞</span>
                </div>
              </div>
            </div>
            <!-- 作者回复 -->
            <div v-if="currentRecipe.author_reply" class="author-reply">
              <div class="comment-item">
                <van-image class="comment-avatar" round :src="currentRecipe.author?.p" width="30" height="30" />
                <div class="comment-content">
                  <div class="comment-user">
                    <span class="username">{{ currentRecipe.author?.n }} (作者)</span>
                    <span class="user-level">LV.{{ currentRecipe.author?.lvl }}</span>
                  </div>
                  <div class="comment-text">{{ currentRecipe.author_reply }}</div>
                </div>
              </div>
            </div>
            <!-- 评论列表结束分隔线 -->
            <div class="comment-end" v-if="currentRecipe.comments && currentRecipe.comments.length > 0">
              — End —
            </div>
          </div>
          <!-- 输入框区域 -->
          <div class="comment-input-area">
            <div class="input-box">
              <van-icon name="smile-o" class="input-icon" />
              <input v-model="commentText" class="comment-input" placeholder="我想说两句" @keyup.enter="submitComment" />
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, useTemplateRef, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { fetchRecipeDetail } from '@/api/index.js'
import { useRouter, useRoute } from 'vue-router'
// import { showToast } from 'vant'
const swipeRef = useTemplateRef('swipe')
const router = useRouter()
const route = useRoute()
const id = computed(() => route.params.id) //菜谱id




const commentText = ref('')
// 加载状态
const isLoading = ref(true)
// 轮播相关状态
const currentImageIndex = ref(0)


// 滚动状态

const recipeDetail = useTemplateRef('recipeDetailRef')
const isScrolled = ref(false)
const bannerHeight = ref(0)



// 模拟菜谱数据
const currentRecipe = ref({
  title: '早餐快手菜团子，蒸一蒸10分钟出',
  author: {
    n: '米白厨房',
    lvl: 6,
    p: 'https://cp1.douguo.com/upload/avatar/default.jpg',
  },
  images: [
    'https://cp1.douguo.com/upload/caiku/a/b/6/690x390_ab6c0e6f7c8e8b8e8c8f8e8d8f8e8c8f8e.jpg',
  ],
  cooking_time: 10,
  servings: 2,
  calories: 150,
  ingredients: [
    { name: '玉米面', amount: '100克' },
    { name: '胡萝卜', amount: '1根' },
    { name: '鸡蛋', amount: '4个' },
    { name: '菠菜', amount: '4棵' },
    { name: '橄榄油', amount: '适量' },
    { name: '盐', amount: '少许' },
    { name: '五香粉', amount: '少许' },
    { name: '蚝油', amount: '小勺' },
    { name: '生抽', amount: '一丢丢' },
    { name: '小麦粉', amount: '80g' },
    { name: '黑全麦粉', amount: '100g' },
  ],
  steps: [
    { description: '胡萝卜洗净切碎，菠菜洗净焯水后切碎备用', image: '' },
    { description: '鸡蛋打散，平底锅放少许橄榄油炒熟盛起', image: '' },
    { description: '将玉米面、黑全麦粉、小麦粉混合到一起', image: '' },
    { description: '加入胡萝卜碎、菠菜碎、炒鸡蛋，搅拌均匀', image: '' },
    { description: '加入盐、蚝油、生抽、五香粉调味', image: '' },
    { description: '加温水和成光滑面团，盖上湿布醒10分钟', image: '' },
    { description: '将面团分成小剂子，包成团子', image: '' },
    { description: '蒸锅水开后放入团子，大火蒸10分钟', image: '' },
    { description: '出锅后稍微放凉即可享用', image: '' },
  ],
  tips: '面团不要和得太硬，稍微软一点蒸出来的团子更松软。',
  publish_time: '2020-11-23',
  view_count: 11730000,
  collect_count: 119000,
  like_count: 23456,
  learn_count: 98,
  activity_tags: ['全年包月 | 橄榄中国味', '感恩添美味'],
  comments: [
    {
      id: 1,
      user: {
        name: '凤舞九天nvjz',
        level: 1,
        avatar: 'https://cp1.douguo.com/upload/avatar/default.jpg',
      },
      content: '翻豆腐时很容易翻乱',
      time: Date.now() - 3600000,
      isLiked: false,
    },
    {
      id: 2,
      user: {
        name: '小米的厨房日记',
        level: 6,
        avatar: 'https://cp1.douguo.com/upload/avatar/default.jpg',
      },
      content: '这个也太太太诱人了吧～赞一个',
      time: Date.now() - 7200000,
      isLiked: false,
    },
  ],
  author_reply: '油可以多一点，不粘锅更好，炸的那面多炸一会，炸干一些再翻，就不容易破了。',
  // 营养分析数据
  nutrition_locked: true,
  // 用户作品
  userWorks: [
    {
      image: 'https://cp1.douguo.com/upload/caiku/d/e/9/690x390_de9f0h1i2j3k3e3j3f2g2h3i3j4k4l.jpg',
      author: '美食小当家',
      description: '第一次做，很成功！',
    },
    {
      image: 'https://cp1.douguo.com/upload/caiku/e/f/0/690x390_ef0g1i2j3k4l4f4k4g3h3i4j4k5l5m.jpg',
      author: '厨房小白',
      description: '简单易学，推荐！',
    },
  ],
})
// 关注状态
const isFollowing = ref(false)
// 评论数量
const commentCount = computed(() => currentRecipe.value.comments?.length || 0)
// 显示评论弹窗状态
const showBottom = ref(false)
// 点赞状态
const isLiked = ref(false)
// 收藏状态
const isCollected = ref(false)
// 点赞数格式化
const formatLikeCount = (count) => {
  if (count < 1000) {
    return count
  } else {
    const kValue = count / 1000
    // 截断到小数点后一位（不四舍五入）
    const truncated = Math.floor(kValue * 10) / 10
    // 如果小数部分为 0，可以只显示整数（可选）
    return truncated % 1 === 0 ? truncated + 'k' : truncated.toFixed(1) + 'k'
  }
}
// 初始化轮播图高度
const initSwipeHeight = () => {
  nextTick(() => {
    if (swipeRef.value && currentRecipe.value.images && currentRecipe.value.images.length > 0) {
      const swipeItems = swipeRef.value.$el.querySelectorAll('.van-swipe-item')
      if (swipeItems[0]) {
        const firstItemHeight = swipeItems[0].offsetHeight
        swipeRef.value.$el.style.height = `${firstItemHeight}px`
        swipeRef.value.resize()
      }
    }
  })
}


// 获取菜谱详情
const getRecipeDetail = async (id) => {

  try {
    const response = await fetchRecipeDetail(id)

    // 检查响应是否存在且具有正确的结构
    if (response && response.state === 'success' && response.result && response.result.note) {
      currentNote.value = response.result.note
      // console.log('currentNote', currentNote.value)
    } else {
      console.log('获取笔记详情失败：响应数据结构不正确')
      console.log('响应内容：', response)
    }
  } catch (error) {
    console.log('获取笔记详情失败：', error)
  } finally {
    // 关闭加载效果
    isLoading.value = false
  }





}



watch(
  () => id.value,
  (newId, oldId) => {
    if (newId && newId !== oldId) {
      // 重新设置加载状态
      isLoading.value = true
      getRecipeDetail(newId)
    }
  },
  { immediate: true },
)


// 监听菜谱图片变化，初始化轮播图高度
watch(
  () => currentRecipe.value.images,
  (newImages) => {
    if (newImages && newImages.length > 0) {
      // 延迟初始化，确保 DOM 已渲染
      setTimeout(initSwipeHeight, 100)
    }
  },
  { immediate: true },
)
// 手动滑动
const onDragEnd = ({ index }) => {
  if (swipeRef.value) {
    currentImageIndex.value = index
    // 滑动结束后更新轮播图高度
    nextTick(() => {
      const swipeItems = swipeRef.value.$el.querySelectorAll('.van-swipe-item')
      if (swipeItems[index]) {
        const newHeight = swipeItems[index].offsetHeight
        swipeRef.value.$el.style.height = `${newHeight}px`
        swipeRef.value.resize()
      }
    })
  }
}
// 图片加载完成后的处理
const onImageLoad = (event) => {
  const img = event.target
  const swipeItem = img.closest('.van-swipe-item')
  if (swipeItem) {
    // 设置当前轮播项的高度为图片的实际高度
    const imgHeight = img.offsetHeight
    swipeItem.style.height = `${imgHeight}px`
    // 重新计算轮播图容器高度
    nextTick(() => {
      if (swipeRef.value) {
        // 获取当前激活的轮播项
        const activeIndex = currentImageIndex.value
        const swipeItems = swipeRef.value.$el.querySelectorAll('.van-swipe-item')
        if (swipeItems[activeIndex]) {
          const activeHeight = swipeItems[activeIndex].offsetHeight
          swipeRef.value.$el.style.height = `${activeHeight}px`
        }
        // 触发轮播图重新计算尺寸
        swipeRef.value.resize()
      }
    })
  }
}
// 格式化浏览量
const formatViewCount = (count) => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count.toString()
}
// 滚动监听函数
const handleScroll = () => {
  if (!recipeDetail.value) return

  const scrollTop = recipeDetail.value.scrollTop
  const bannerOffsetTop = bannerHeight.value

  // 当滚动超过活动横幅时，导航栏图标变为黑色
  isScrolled.value = scrollTop > bannerOffsetTop
}

// 计算活动横幅高度
const calculateBannerHeight = () => {
  const bannerElement = document.querySelector('.media-section')
  if (bannerElement) {
    bannerHeight.value = bannerElement.offsetHeight
  }
}

onMounted(() => {
  // 页面初始化逻辑
  // 计算banner高度
  calculateBannerHeight()

  // 添加滚动监听
  if (recipeDetail.value) {
    recipeDetail.value.addEventListener('scroll', handleScroll)
  }

  // 监听窗口大小变化，重新计算横幅高度
  window.addEventListener('resize', calculateBannerHeight)
})

onUnmounted(() => {
  // 清理事件监听
  if (recipeDetail.value) {
    recipeDetail.value.removeEventListener('scroll', handleScroll)
  }
  window.removeEventListener('resize', calculateBannerHeight)
});
// 格式化评论日期
const formatCommentDate = (timestamp) => {
  if (!timestamp) return ''
  const date = new Date(timestamp)
  const now = new Date()
  const diffTime = now.getTime() - date.getTime()
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
  if (diffDays === 0) {
    return '今天'
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    })
  }
}
// 方法定义
const goBack = () => {
  router.back()
  // 使用 nextTick 确保在页面渲染完成后滚动到顶部
  nextTick(() => {
    window.scrollTo(0, 0)
  })
}
const handleFollow = () => {
  isFollowing.value = true
  // showToast('关注成功')
}
const handleUnfollow = () => {
  isFollowing.value = false
  // showToast('已取消关注')
}
// 点赞
const handleLike = () => {
  isLiked.value = !isLiked.value
  const feedback = [
    '收到你的点赞，感恩',
    '收到你的赞，收到你的爱',
    '你刚刚给人间撒了爱',
    '交个友点个赞',
    '贡献点爱，贡献爱',
    '爱点赞的都颜值高',
    '我喜欢你点赞的样子',
  ]
  if (isLiked.value) {
    // 启用随机反馈显示
    // showToast({
    //   message: feedback[Math.floor(Math.random() * feedback.length)],
    //   position: 'top',
    // })
  }
}
// 收藏
const handleCollect = () => {
  isCollected.value = !isCollected.value
  if (isCollected.value) {
    // 启用随机反馈显示
    // showToast({
    //   message: '收藏成功',
    //   position: 'top',
    // })
  }
}
const showComments = () => {
  // 显示评论列表弹窗
  showBottom.value = true
}
// 评论点赞
const toggleCommentLike = (comment) => {
  comment.isLiked = !comment.isLiked
  // 这里可以添加点赞的API调用
  if (comment.isLiked) {
    // comment.like_count = (comment.like_count || 0) + 1
  } else {
    // comment.like_count = Math.max(0, (comment.like_count || 1) - 1)
  }
}
// 提交评论
const submitComment = () => {
  if (!commentText.value.trim()) {
    // showToast('请输入评论内容')
    return
  }
  // 这里可以添加提交评论的API调用
  const newComment = {
    id: Date.now(),
    user: {
      name: '当前用户',
      level: 1,
      avatar: 'https://cp1.douguo.com/upload/avatar/default.jpg',
    },
    content: commentText.value,
    time: Date.now(),
    isLiked: false,
  }
  if (!currentRecipe.value.comments) {
    currentRecipe.value.comments = []
  }
  currentRecipe.value.comments.unshift(newComment)
  commentText.value = ''
  // showToast('评论成功')
}
// 上传作品
const uploadWork = () => {
  // showToast('上传作品功能开发中')
  console.log('上传作品')
}
// 分享到微信
const shareToWechat = () => {
  // showToast('分享到微信功能开发中')
  console.log('分享到微信')
}
// 分享到微信朋友圈
const shareToWechatMoment = () => {
  // showToast('分享到微信朋友圈功能开发中')
  console.log('分享到微信朋友圈')
}
// 分享功能
const share = () => {
  // showToast('分享功能开发中')
  console.log('分享')
}
// 模拟数据加载完成
setTimeout(() => {
  isLoading.value = false
}, 1000)
</script>
<style scoped>
.recipe-detail {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 60px;
  position: relative;
}

.global-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* 透明顶部导航栏样式 */
.transparent-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: transparent;
  z-index: 1000;
  transition: all 0.3s ease;
}

.transparent-navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-actions {
  display: flex;
  gap: 16px;
}

.nav-icon {
  width: 24px;
  height: 24px;
  font-size: 20px;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-icon:hover {
  opacity: 0.7;
  transform: scale(0.95);
}

/* 作者信息区域 */
.author-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  border: 1px solid #f0f0f0;
}

.author-meta {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.author-level {
  font-size: 12px;
  color: #ff6b35;
}

.follow-btn {
  background: #ff4d4f;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  height: 28px;
  padding: 0 16px;
  color: white;
}

.followed-btn {
  border-radius: 16px;
  font-size: 12px;
  height: 28px;
  padding: 0 16px;
  color: #999;
  border-color: #ddd;
}

.activity-tags {
  margin-bottom: 16px;
}

.activity-tag {
  font-size: 12px;
  color: #1890ff;
  margin-right: 8px;
}

/* 内容区域样式 */
.recipe-content {
  padding: 0 16px;
}

.media-section {
  position: relative;
  margin: 0 0 16px 0;
  width: 100%;
  overflow: hidden;
  min-height: 200px;
}

.page-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  z-index: 10;
}

.image-count {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  z-index: 10;
}

.title-section {
  margin-bottom: 16px;
}

.recipe-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.tags-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.tag {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.tag.premium {
  background-color: #ffd700;
  color: #333;
}

.tag.exclusive {
  background-color: #ff6b35;
  color: white;
}

.tag.view-count,
.tag.collect-count,
.tag.learn-count {
  background-color: #f0f0f0;
  color: #666;
}

.rank-tag {
  background-color: #333;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 12px;
}

.swipe {
  width: 100%;
  transition: height 0.3s ease;
}

:deep(.van-swipe-item) {
  line-height: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.swipe-item {
  line-height: 0;
}

.media-image {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  max-height: 80vh;
}

:deep(.van-image) {
  display: block !important;
  height: auto !important;
  line-height: 0;
  width: 100%;
}

:deep(.van-image__img) {
  display: block;
  width: 100%;
  height: auto !important;
  line-height: 0;
  object-fit: contain;
}

.page-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  z-index: 10;
}

/* 菜谱基本信息 */
.recipe-meta {
  display: flex;
  justify-content: space-around;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.meta-item .van-icon {
  font-size: 20px;
  color: #ff6b35;
  margin-bottom: 4px;
}

.meta-item span {
  font-size: 12px;
  color: #666;
}

/* 用料部分 */
.ingredients-section {
  margin-bottom: 20px;
}

.add-to-cart {
  text-align: center;
  margin-top: 12px;
}

.add-to-cart-link {
  color: #1890ff;
  font-size: 14px;
  text-decoration: none;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.nutrition-subtitle {
  font-size: 12px;
  font-weight: normal;
  color: #999;
}

.ingredients-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ingredient-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.ingredient-name {
  font-size: 14px;
  color: #333;
}

.ingredient-amount {
  font-size: 14px;
  color: #666;
}

/* 营养分析 */
.nutrition-section {
  margin-bottom: 20px;
}

.nutrition-content {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 16px;
}

.nutrition-content.locked {
  position: relative;
  background: #f0f0f0;
}

.nutrition-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.lock-icon {
  font-size: 32px;
  color: #999;
  margin-bottom: 8px;
}

.lock-text {
  text-align: center;
}

.lock-text p {
  margin: 4px 0;
  font-size: 14px;
  color: #666;
}

.lock-subtext {
  font-size: 12px !important;
  color: #999 !important;
}

.nutrition-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.nutrition-item {
  display: flex;
  justify-content: space-between;
}

.nutrition-label {
  font-size: 14px;
  color: #333;
}

.nutrition-value {
  font-size: 14px;
  color: #666;
}

/* 做法步骤 */
.steps-section {
  margin-bottom: 20px;
}

.steps-overview {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  padding-left: 8px;
}

.steps-list {
  padding: 0 8px;
}

.step-item {
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.step-number {
  background: #ff6b35;
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: bold;
}

.step-content {
  flex: 1;
}

.step-description {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.step-image {
  width: 100%;
  border-radius: 8px;
}

/* 小贴士 */
.tips-section {
  background: #fff8e1;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.tips-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* UGC展示区 */
.ugc-section {
  margin-bottom: 20px;
}

.ugc-list {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 8px 0;
  margin-bottom: 12px;
}

.ugc-item {
  flex: 0 0 120px;
}

.ugc-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.ugc-meta {
  font-size: 12px;
}

.ugc-author {
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ugc-desc {
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-all-ugc {
  text-align: center;
  color: #1890ff;
  font-size: 14px;
  padding: 8px 0;
}

/* 时间和互动数据 */
.meta-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #999;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
}

.publish-time {
  font-size: 12px;
  color: #999;
}

.interaction-count {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-count,
.collect-count {
  font-size: 12px;
  color: #999;
}

/* 底部操作栏样式 */
.recipe-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  z-index: 100;
}

.footer-actions {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

.upload-btn {
  background: #ff4d4f;
  border: none;
  border-radius: 20px;
  color: white;
  font-size: 14px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
}

.action-group {
  flex: 1;
  display: flex;
  align-items: center;
}

.comment-input-wrapper {
  flex: 1;
  margin-right: 12px;
}

.comment-input {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 12px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.comment-btn,
.like-btn,
.collect-btn {
  font-size: 20px;
  color: #999;
}

.like-btn.active,
.collect-btn.active {
  color: #ff4d4f;
}

.action-count,
.action-text {
  font-size: 12px;
  color: #999;
}

/* 底部操作栏样式 */
.recipe-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  z-index: 100;
}

.comment-input-wrapper {
  flex: 1;
  margin-right: 12px;
}

.comment-input {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 12px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.comment-btn,
.like-btn,
.collect-btn {
  font-size: 20px;
  color: #999;
}

.like-btn.active,
.collect-btn.active {
  color: #ff4d4f;
}

.action-count,
.action-text {
  font-size: 12px;
  color: #999;
}

/* 评论弹窗样式 */
.comment-modal {
  background: #fff;
  border-radius: 16px 16px 0 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.comment-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.close-icon {
  font-size: 20px;
  color: #888;
}

.comment-list {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 16px;
}

.comment-avatar {
  flex-shrink: 0;
  margin-right: 12px;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.comment-user .username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.comment-user .user-level {
  font-size: 12px;
  color: #ffd700;
  margin-left: 8px;
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.comment-meta {
  display: flex;
  align-items: center;
}

.comment-date {
  font-size: 12px;
  color: #888;
}

.comment-actions {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #888;
  padding: 4px 8px;
  border-radius: 12px;
}

.like-btn.active {
  color: #ff4040;
  background: #ffeaea;
}

.like-btn .van-icon {
  font-size: 14px;
}

.author-reply {
  background-color: #f5f5f5;
  padding: 10px 15px;
  border-radius: 8px;
  margin: 8px 16px;
}

.comment-end {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: #e0e0e0;
}

.comment-input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.input-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  padding: 12px 16px;
}

.input-icon {
  font-size: 18px;
  color: #666;
  margin-right: 8px;
}

.comment-input {
  flex: 1;
  border: none;
  outline: none;
  background: #f5f5f5;
  font-size: 16px;
  color: #333;
  border-radius: 20px;
  padding: 8px 12px;
}

.comment-input::placeholder {
  color: #aaa;
}
</style>
